<template>
  <j-page title="捷印" back-text="返回" ref="page" :tabbar="true">
    <view class="content">
      <view class="modules">
        <view class="module">
          <view class="module_title">打印</view>
          <image class="module_image" src="/static/print.png"></image>
        </view>
        <view class="module">
          <view class="module_title">工具箱</view>
          <image class="module_image" src="/static/tools.png"></image>
        </view>
      </view>
    </view>
  </j-page>
</template>

<script>
import {test} from "@i"
export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {
    test().then(console.log).catch(err=>{
      console.log("err",err);
    })
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  & .modules{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    & .module{
      position: relative;
      height: 300rpx;
      width: 80%;
      margin: 40rpx;
      border-radius: 40rpx;
      overflow: hidden;
      &:active{
        opacity: 0.7;
      }

      &:nth-child(1){
        background-image: linear-gradient(45deg,#4facfe,#00f2fe);
      }

      &:nth-child(2){
        background-image: linear-gradient(45deg,#f6d365,#fda085);
      }

      &_title{
        font-size: 60rpx;
        color: #FFFFFF;
        margin: 10rpx 0 0 30rpx;
      }

      &_image{
        top: 0rpx;
        left: 160rpx;
        position: absolute;
      }
    }
  }
}
</style>
